import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import router from './routes'

const pinia = createPinia()
const app = createApp(App)
console.log('🚀 ~ app:', app)

console.info('app.config', JSON.stringify(app.config))

app.config.errorHandler = (err, instance, info) => {
    console.log('🚀 ~ app.config.errorHandler ~ err:', err)
    console.log('🚀 ~ app.config.errorHandler ~ instance:', instance)
    console.log('🚀 ~ app.config.errorHandler ~ info:', info)
}
app.config.warnHandler = (msg, instance, trace) => {
    console.log('🚀 ~ app.config.warnHandler ~ msg:', msg)
    console.log('🚀 ~ app.config.warnHandler ~ instance:', instance)
}

app.config.globalProperties.appName = 'Vue3 of Leslie'
app.config.globalProperties.$test = () => {
    window.alert('global property function $test')
}

app.directive('autofocus', {
    mounted(el) {
        el.focus()
    }
})

app.directive('toggle-visible', {
    mounted(el, binding) {
        console.log('🚀 ~ mounted ~ binding:', binding)
        if (!binding.modifiers.lazy) {
            el.style.display = binding.value ? 'block' : 'none'
        }
    },
    updated(el, binding) {
        console.log('🚀 ~ updated ~ binding:', binding)
        if (!binding.modifiers.lazy) {
            el.style.display = binding.value ? 'block' : 'none'
        }
    }
})

app.use(pinia).use(router).use(ElementPlus).mount('#app')
